<script setup>
import fieldModel from "@/models/fieldModel.js"
import { computed, defineProps } from "vue";

const { meta, vm } = defineProps(["meta", "vm"]);
const dataModel = vm.getModelRef(meta.model);
const field = fieldModel(vm, dataModel, meta);

const value = computed({
  get() {
    return field.value.getValue();
  },
  set(newValue) {
    if (newValue) {
      let s = newValue.getFullYear() + "-"
        + (newValue.getMonth() + 1) + "-"
        + newValue.getDate();
      return field.value.setValue(s);
    } else {
      return field.value.setValue(newValue);
    }
  }
});
</script>

<template>
  <el-date-picker v-if="field.isEditing" v-model="value" type="date" format="YYYY-MM-DD" />
  <el-text v-else class="m-2">{{ field.displayValue }}</el-text>
</template>